设计模式之观察者（发布/订阅）模式

发布/订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系。当一个对象的状态（发布者）发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布—订阅模式。

DOM 事件

观察者模式应该是最常用的模式之一。在很多语言里都得到大量应用。包括我们平时接触的dom事件，也是js和dom之间实现的一种观察者模式。

    document.body.addEventListener('click',function () {
        alert(111);
    },false);
    document.body.addEventListener('click',function () {
        alert(222);
    },false);
    document.body.addEventListener('click',function () {
        alert(333);
    },false);
    document.body.click();//模拟点击事件

这里我们订阅了document.body 的 click 事件，当 body 被点击的时候，他就向订阅者发布这个消息，顺序弹出111 222 333。我们也可以随意的增加和删除订阅者。总之，当消息一发布，所有的订阅者都会收到消息。

这里，手动触发事件直接用了document.body.click()；但是更好的做法是IE下用 fireEvent，标准浏览器下用 dispatchEvent。

全局的发布/订阅对象

发布/订阅模式可以用一个全局的 Event 对象来实现,订阅者不需要了解消息来自哪个发布者，发布者也不知道消息会推送给哪些订阅者，Event 作为一个类似“中介者” 的角色，把订阅者和发布者联系起来。

let Event = (function () {
    let clientList = {};
    let listen;
    let trigger;
    let remove;

    listen = function (name, cb) {
        if( !clientList[name] ) {
            clientList[name] = [];
        }
        clientList[name].push(cb);
    };

    trigger = function () {
        let name = [].shift.call(arguments);
        let fns = clientList[name];
        if( !fns || fns.length == 0 ) return false;
        fns.map((item, index) => {
            item(...arguments); // 不要直接将arguments传入
        })
    };

    remove = function (name, cb) {
        let fns = clientList[name];
        if( !fns ) return false; // name对应的消息么有被人订阅
        if( !cb ) { // 没有传入cb(具体的回调函数), 表示取消 name 对应的所有订阅 
            fns && (fns.length = 0); //  不加括号会报错：ReferenceError: Invalid left-hand side in assignment
        } else {
            clientList[name] = fns.filter((item, index) => {
                return item !== cb; // filter不改变原数组 return不忘记
            })
            /*
            // 反向遍历
            for(let i = fns.length - 1; i >= 0; i--) {
                let _cb = fns[i];
                if(_cb === cb) {
                    fns.splice(i, 1);
                }
            }
            */
        }
    };

    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }

})();

let foo1 = function( num ){
    console.log('foo triggered');
}
let foo2 = function( num ){
    console.log(num);
}
Event.listen('foo', foo1);
Event.listen('foo', foo2);

Event.trigger('foo', 2);
// foo triggered
// 2

看下下面这段代码的输出，可以看到是无法取消对应的订阅信息的。就像{} === {}结果是 false一样(引用类型的特点：按地址存放)。

Event.remove('foo', function(num){console.log(num)});
Event.trigger('foo', 2); 
// let obj1 = {};
// let obj2 = {};
//obj1 === obj2 // false
//but
//obj1 === obj1 // true

正确写法：

Event.remove('foo', foo2);
Event.trigger('foo', 2);

必须先订阅再发布吗

我们所了解的发布/订阅模式，都是订阅者必须先订阅一个消息，随后才能接收到发布者发布的消息。如果把顺序反过来，发布者先发布一个消息，而在此之前并没有对象来订阅它，那么这条消息就消失在宇宙中了。

建立一个存放离线事件的堆栈，当事件发布的时候，如果此时还没有订阅者来订阅这个事件，我们暂时把发布事件的动作包裹在一个函数里，这些包装函数将被存入堆栈中，等到终于有对象来订阅此事件的时候，我们将遍历堆栈并且依次执行这些包装函数，也就是重新发布里面的事件。当然离线事件的生命周期只有一次，就像QQ的未读消息只会被重 新阅读一次，所以刚才的操作我们只能进行一次。

优缺点

1. 优点：

发布—订阅模式的优点非常明显：

• 时间上的解耦；
• 对象之间的解耦。

它的应用非常广泛,既可以用在异步编程中，也可以帮助我们完成更松耦合的代码编写。发布/订阅模式还可以用来帮助实现一些别的设计模式，比如中介者模式。

从架构上来看，无论是 MVC 还是 MVVM,，都少不了发布/订阅模式的参与，而且 JavaScript 本身也是一门基于事件驱动的语言。

1. 缺点：

当然，发布/订阅模式也不是完全没有缺点。创建订阅者本身要消耗一定的时间和内存，而且当你订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。

另外，发布/订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将被深埋在背后，会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者嵌套到一起的时候，要跟踪一个 bug 不是件轻松的事情。